<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { useServerStore } from "../../store/server";
const oneid = ref(1);
const itemid = (id: number) => {
  oneid.value = id;
};
const store = useServerStore();
import hdialog from "../r-dialog.vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { get } from "../../request";
const bntlist = [
  { id: 1, name: "我的客户" },
  { id: 2, name: "我全部的客户" },
  { id: 3, name: "我标☆客户" },
  { id: 4, name: "我停用客户" },
  { id: 5, name: "我创建" },
];
const getshow = async () => {
  let res = await get("/client/getcystoModel");
  // tableDataone.value = res.data;
  // filterTable.value = res.data;
};
onMounted(() => {
  getshow();
});
// import { ElTable, ElTableColumn, ElButton } from "element-plus";
const tableDataone = ref([]);
const filterTable = ref([]);
// const value = ref("");
const options = [
  {
    value: "网上开拓",
    label: "网上开拓",
  },
  {
    value: "电话开拓",
    label: "电话开拓",
  },
];
const optionsone = [
  {
    value: "互联网",
    label: "互联网",
  },
  {
    value: "软件",
    label: "软件",
  },
  {
    value: "个体经营",
    label: "个体经营",
  },
  {
    value: "个人",
    label: "个人",
  },
  {
    value: "政府机构",
    label: "政府机构",
  },
  {
    value: "其它",
    label: "其它",
  },
];
interface tableData {
  base_name: String; //申请人
  base_deptname: String; //申请人部门
  sericnum: String; //单号
  name: String; //客户名称
  suoname: String; //所属人
  type: String; //类型
  laiyuan: String; //来源
  unitname: String; //客户单位
  tel: String; //联系电话
  mobile: String; //手机
  shi: String; //所在市，
  sheng: String; //所在省
  email: String; //邮箱
  address: String; //地址
  routeline: String; //交通路线
  status: String; //状态
  isstat: String; //是否标星
  isgys: String; //是否供应商
  linkname: String; //联系人
  explain: String; //备注
  htshu: String; //合同数
  moneryz: String; //销售总额
  moneryd: String; //代销总额
  lie: String; //操作列
}
const list = ref([
  { id: 1, type: "base_name", flag: true, name: "申请人" },
  { id: 2, type: "base_deptname", flag: true, name: "申请人部门" },
  { id: 3, type: "sericnum", flag: true, name: "单号" },
  { id: 4, type: "name", flag: true, name: "客户名称" },
  { id: 5, type: "suoname", flag: true, name: "所属人" },
  { id: 6, type: "type", flag: true, name: "类型" },
  { id: 7, type: "laiyuan", flag: true, name: "来源" },
  { id: 8, type: "unitname", flag: true, name: "客户单位" },
  { id: 9, type: "tel", flag: true, name: "联系电话" },
  { id: 10, type: "mobile", flag: true, name: "手机" },
  { id: 11, type: "shi", flag: true, name: "所在市" },
  { id: 12, type: "sheng", flag: true, name: "所在省" },
  { id: 13, type: "email", flag: false, name: "邮箱" },
  { id: 14, type: "address", flag: false, name: "地址" },
  { id: 15, type: "routeline", flag: false, name: "交通路线" },
  { id: 16, type: "status", flag: false, name: "状态" },
  { id: 17, type: "isstat", flag: false, name: "是否标星" },
  { id: 18, type: "isgys", flag: false, name: "是否供应商" },
  { id: 19, type: "linkname", flag: false, name: "联系人" },
  { id: 20, type: "explain", flag: false, name: "备注" },
  { id: 21, type: "htshu", flag: false, name: "合同数" },
  { id: 22, type: "moneryz", flag: false, name: "销售总额" },
  { id: 23, type: "moneryd", flag: false, name: "代销总额" },
  { id: 24, type: "lie", flag: false, name: "操作列" },
]);

const inp = ref("");
const handeltable = () => {
  filterTable.value = gettable();
};
const gettable = () => {
  if (inp.value === "") {
    console.log(inp.value);
    return (tableDataone.value = tableDataone.value);
  } else {
    console.log(inp.value);
    return tableDataone.value.filter(
      (item: tableData) =>
        item.name.includes(inp.value) ||
        item.laiyuan.includes(inp.value) ||
        item.address.includes(inp.value) ||
        item.linkname.includes(inp.value) ||
        item.mobile.includes(inp.value) ||
        item.tel.includes(inp.value)
    );
  }
};

const sel = ref(false);
const mo = ref(false);
const xiang = ref(false);
const newlist = ref([]);
const seleed = () => {
  sel.value = false;
  newlist.value = list.value.filter((item) => item.flag);
};
onMounted(() => {
  seleed();
});
const addsx = () => {
  mo.value = false;
  store.adddata;
  getshow();
};
const shows = (items) => {
  xiang.value = true;
  store.showload(items);
};
const showlist = (row) => {
  var popup = window.open(
    "https://example.com",
    "newWindow",
    "width=800,height=400"
  );
  store.showload(row);

  popup.document.write(`
    <html>
      <head>
        <style>
        .name div {
          border: 1px solid black;
          }
        .namsex {
          width: 800px;
          margin: 0 auto;
        }
        .namsex div{
          height: 50px;
          line-height: 50px;
        }
        .h1{
          font-size: 20px;
          text-align: center;
          margin-bottom: 20px;
        }
        body{
          overflow:hidden;
        }
        </style>
        <title>${row.name}</title>
      </head>
      <body>
        <div class="name">
        <h1 class="h1">客户管理</h1>
        <div class="namsex">
          <div style="display: flex">
            <div style="width: 10%">客户名称</div>
            <div style="width: 90%">${store.data.name}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">申请人</div>
            <div style="width: 90%">${store.data.base_name}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">客户类型</div>
            <div style="width: 90%">${store.data.type}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">来源</div>
            <div style="width: 90%">${store.data.laiyuan}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系电话</div>
            <div style="width: 90%">${store.data.tel}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在市</div>
            <div style="width: 90%">${store.data.shi}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在省</div>
            <div style="width: 90%">${store.data.sheng}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">地址</div>
            <div style="width: 90%">${store.data.address}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">交通路线</div>
            <div style="width: 90%">${store.data.routeline}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">状态</div>
            <div style="width: 90%">${store.data.status}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">是否标星</div>
            <div style="width: 90%">${store.data.isstat}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">供应商</div>
            <div style="width: 90%">${store.data.isgys}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系人</div>
            <div style="width: 90%">${store.data.linkname}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">说明</div>
            <div style="width: 90%">${store.data.explain}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">合同数</div>
            <div style="width: 90%">${store.data.htshu}</div>
          </div>
        </div>
      </div>
      </body>
    </html>
  `);
};
const ting = ref(false);
const xing = ref(false);
const Ttextarea = ref("");
const tinglog = (row) => {
  store.edit(row);
  ting.value=true;
};

const xingon = () => {
  xing.value=true;
  Ttextarea.value = "";
};
const update = ref(false);
const edit = (row) => {
  store.edit(row);
  update.value=true;
};
const edits = () => {
  store.edits();
  update.value=false;
};
const del = (id) => {
  store.deletes(id);
};
</script>
<template>
  <div>
    <!-- 详情 -->
    <div>
      <hdialog v-model="ting">
        <template #title>
          <h3>(新增)客户管理</h3>
        </template>
        <p>请输入[停用]说明(必填):</p>
        <textarea
          v-model="Ttextarea"
          style="border: 1px solid black; margin-bottom: 20px"
          name=""
          id=""
          cols="60"
          rows="5"
        ></textarea>
        <textarea
          style="border: 1px solid black"
          name=""
          id=""
          cols="60"
          rows="5"
        ></textarea>
        <el-button>选择文件</el-button>未选择任何文件
        <div>
          <el-button :disabled="Ttextarea.length <= 0" @click="()=>{
            ting=false
          }"
            >√确定</el-button
          >
          <el-button @click="()=>{
            ting=false
          }">×取消</el-button>
        </div>
      </hdialog>
      <hdialog v-model="xing">
        <template #title>
          <h3>(新增)客户管理</h3>
        </template>
        <p>请输入[停用]说明(必填):</p>
        <textarea
          v-model="Ttextarea"
          style="border: 1px solid black; margin-bottom: 20px"
          name=""
          id=""
          cols="60"
          rows="5"
        ></textarea>
        <textarea
          style="border: 1px solid black"
          name=""
          id=""
          cols="60"
          rows="5"
        ></textarea>
        <el-button>选择文件</el-button>未选择任何文件
        <div>
          <el-button :disabled="Ttextarea.length <= 0" @click="()=>{
            xing=false
          }"
            >√确定</el-button
          >
          <el-button @click="()=>{
            ting=false
          }">×取消</el-button>
        </div>
      </hdialog>
      <hdialog v-model="update":width="`800px`" class="name">
        <h1 class="h1">客户管理</h1>
        <div class="namsex">
          <div style="display: flex">
            <div style="width: 10%">客户名称</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.name"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">申请人</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.base_name"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">客户类型</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.type"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">来源</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.laiyuan"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系电话</div>
            <div style="width: 90%">
              <input style="width: 100%" type="text" v-model="store.data.tel" />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在市</div>
            <div style="width: 90%">
              <input style="width: 100%" type="text" v-model="store.data.shi" />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在省</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.sheng"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">地址</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.address"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">交通路线</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.routeline"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">状态</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.status"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">是否标星</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.isstat"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">供应商</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.isgys"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系人</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.linkname"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">说明</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.explain"
              />
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">合同数</div>
            <div style="width: 90%">
              <input
                style="width: 100%"
                type="text"
                v-model="store.data.htshu"
              />
            </div>
          </div>
        </div>
        <template #footer>
          <p class="bottom">
            <el-button @click="edits">保存(s)</el-button>
            <el-button @click="()=>{
              update=false
            }">取消</el-button>
          </p>
        </template>
      </hdialog>
      <hdialog v-model="xiang" :width="`800px`" class="name">
        <h1 class="h1">客户管理</h1>
        <div class="namsex">
          <div style="display: flex">
            <div style="width: 10%">客户名称</div>
            <div style="width: 90%">{{ store.data.name }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">申请人</div>
            <div style="width: 90%">{{ store.data.base_name }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">客户类型</div>
            <div style="width: 90%">{{ store.data.type }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">来源</div>
            <div style="width: 90%">{{ store.data.laiyuan }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系电话</div>
            <div style="width: 90%">{{ store.data.tel }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在市</div>
            <div style="width: 90%">{{ store.data.shi }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">所在省</div>
            <div style="width: 90%">{{ store.data.sheng }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">地址</div>
            <div style="width: 90%">{{ store.data.address }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">交通路线</div>
            <div style="width: 90%">{{ store.data.routeline }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">状态</div>
            <div style="width: 90%">{{ store.data.status }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">是否标星</div>
            <div style="width: 90%">{{ store.data.isstat }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">供应商</div>
            <div style="width: 90%">{{ store.data.isgys }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">联系人</div>
            <div style="width: 90%">{{ store.data.linkname }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">说明</div>
            <div style="width: 90%">{{ store.data.explain }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 10%">合同数</div>
            <div style="width: 90%">{{ store.data.htshu }}</div>
          </div>
        </div>
        <template #footer>
          <p class="bottom">
            <el-button
              @click="
                () => {
                  xiang = false;
                }
              "
              >取消</el-button
            >
          </p>
        </template>
      </hdialog>
      <hdialog v-model="sel">
        <div class="divs">
          <div v-for="item in list" :key="item.id">
            <el-checkbox v-model="item.flag" size="large">{{
              item.name
            }}</el-checkbox>
          </div>
        </div>
        <template #footer>
          <div class="bottom">
            <el-button @click="seleed">保存(s)</el-button>
            <el-button @click="">取消</el-button>
          </div>
        </template>
      </hdialog>
      <el-button
        @click="
          () => {
            mo = true;
          }
        "
        class="m-2"
        type="primary"
        ><el-icon :size="20"><Plus /></el-icon>新增</el-button
      >

      <el-input
        v-model="inp"
        class="m-2"
        style="width: 150px"
        placeholder="关键字"
      ></el-input>
      <el-button @click="handeltable">搜索 </el-button>
      <el-button style="width: 20px; padding: 0px; margin-right: 30px">
        <el-dropdown>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>高级搜索</el-dropdown-item>
              <el-dropdown-item
                @click="
                  () => {
                    sel = true;
                  }
                "
                >自定义列显示</el-dropdown-item
              >
              <el-dropdown-item>打印</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-button>
      <el-button
        v-for="item in bntlist"
        @click="itemid(item.id)"
        :key="item.id"
        :class="{ on: item.id == oneid }"
        >{{ item.name }}</el-button
      >
    </div>
    <!-- 自定义列表 -->
    <hdialog v-model="mo" :width="`800px`">
      <template #title>
        <h3>(新增)客户管理</h3>
      </template>
      <h3 class="h3">客户管理</h3>
      <table class="table">
        <tr>
          <td>客户名称</td>
          <td><el-input v-model="store.data.name" type="text" /></td>
          <td>来源</td>
          <td>
            <el-select
              v-model="store.data.laiyuan"
              placeholder="--请选择--"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>客户单位</td>
          <td><el-input v-model="store.data.unitname" type="text" /></td>
          <td>客户类型</td>
          <td>
            <el-select
              v-model="store.data.type"
              placeholder="--请选择--"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in optionsone"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>联系人</td>
          <td><el-input v-model="store.data.linkname" type="text" /></td>
          <td>邮箱</td>
          <td><el-input v-model="store.data.email" type="text" /></td>
        </tr>
        <tr>
          <td>联系电话</td>
          <td><el-input v-model="store.data.tel" type="text" /></td>
          <td>联系手机</td>
          <td><el-input v-model="store.data.mobile" type="text" /></td>
        </tr>
        <tr>
          <td>所在省</td>
          <td><el-input v-model="store.data.sheng" type="text" /></td>
          <td>所在市</td>
          <td><el-input v-model="store.data.shi" type="text" /></td>
        </tr>
        <tr>
          <td>地址</td>
          <td colspan="4">
            <el-input v-model="store.data.dress" type="text" />
          </td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>交通路线</td>
          <td colspan="4">
            <el-input
              v-model="store.data.routeline"
              style="width: 100%"
              :rows="3"
              type="textarea"
              placeholder="Please input"
            />
          </td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>声明</td>
          <td colspan="4">
            <el-input
              v-model="store.data.explain"
              style="width: 100%"
              :rows="3"
              type="textarea"
              placeholder="Please input"
            />
          </td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>相关文件</td>
          <td colspan="4">
            <el-input
              style="width: 100%"
              :rows="3"
              type="textarea"
              placeholder="Please input"
            />
          </td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>状态</td>
          <td>
            <el-select
              v-model="store.data.status"
              placeholder="--请选择--"
              size="large"
              style="width: 240px"
            >
              <el-option value="启用" label="true" default> </el-option>
              <el-option value="停用" label="false"> </el-option>
            </el-select>
          </td>
          <td>是否标</td>
          <td>
            <el-select
              v-model="store.data.isstat"
              placeholder="--请选择--"
              size="large"
              style="width: 240px"
            >
              <el-option value="是" label="true" default> </el-option>
              <el-option value="否" label="false"> </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>供应商</td>
          <td>
            <input v-model="store.data.isgys" type="checkbox" />
            是
          </td>
          <td></td>
          <td></td>
        </tr>
      </table>
      <hr />
      <template #footer>
        <div class="bottom">
          <el-button class="right_bnt" @click="addsx">保存(s)</el-button>
        </div>
      </template>
    </hdialog>
    <!-- 表格 -->
    <el-table
      ref="singleTableRef"
      highlight-current-row
      empty="没有数据"
      :data="filterTable"
      :border="true"
      style="width: 100%"
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" width="50" />
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column
        v-for="item in newlist"
        :key="item.id"
        :prop="item.type"
        :label="item.name"
      />
      <!-- 添加其他列 -->

      <!-- 添加操作列 -->
      <el-table-column>
        <template #default="{ row }">
          <el-dropdown>
            <span class="el-dropdown-link">
              操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="shows(row)">详情</el-dropdown-item>
                <el-dropdown-item @click="showlist(row)"
                  >详情(新窗口)</el-dropdown-item
                >
                <el-dropdown-item @click="tinglog(row)">停用</el-dropdown-item>
                <el-dropdown-item @click="xingon">标星</el-dropdown-item>
                <el-dropdown-item>共享</el-dropdown-item>
                <el-dropdown-item>评论</el-dropdown-item>
                <el-dropdown-item @click="shows(row)"
                  >添加提醒设置</el-dropdown-item
                >
                <el-dropdown-item @click="edit(row)">编辑</el-dropdown-item>
                <el-dropdown-item style="color: red" @click="del(row._id)"
                  >删除</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: skyblue;
  display: flex;
  align-items: center;
}
.on {
  background-color: transparent;
  display: inline-block;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-color: #4e4f50;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
}

.el-button {
  margin: 0;
  color: black;
}
.el-button:focus {
  color: black;
}
.el-button:hover {
  background: none;
  border-color: #4e4f50;

  color: black;
}
.mar {
  margin-right: 10px;
}
.el-scrollbar {
  border-radius: 70px;
}
.el-scrollbar__view .el-select-dropdown__list {
  border-radius: 70px;
}
.table {
  border: 1px solid black;
  width: 90%;
  margin: 0 auto;
}
.table tr td {
  border: 1px solid black;
}
.right_bnt {
  position: absolute;
  right: 0;
  margin-right: 10px;
  margin-top: 2px;
}
.bottom {
  margin-top: 20px;
  width: 100%;
  height: 40px;
  background: rgb(238, 238, 238);
}
.h3 {
  text-align: center;
  margin: 10px;
  font-size: 20px;
  font-weight: bold;
}
tr {
  width: 120%;
}
tr td {
  margin: 0 auto;
}
.divs {
  height: 200px;
  overflow: auto;
}
.name div {
  border: 1px solid black;
}
.namsex {
  width: 600px;
  margin: 0 auto;
}
.namsex div {
  height: 50px;
  line-height: 50px;
}
.h1 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
</style>
